<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: MI
  Date: 2018/8/4
  Time: 16:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品详情页</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="/resource/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/resource/css/style.css"/>
    <script src="/resource/js/jquery.min.js"></script>
    <script src="/resource/js/amazeui.min.js"></script>

</head>

<body>
<div class="container">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
        <a href="/chick/index?uid=${chick.userId}" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
        <h1 class="am-header-title">
            <div  class="">兑换家鸡</div>
        </h1>
        <%--<div class="am-header-right am-header-nav">--%>
            <%--<a href="#right-link" class="">--%>
                <%--<i class="am-header-icon  am-icon-home"></i>--%>
            <%--</a>--%>
        <%--</div>--%>
    </header>
    <!-- banner -->
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
        <ul class="am-slides">
            <li>
                <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">
            </li>
            <li>
                <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">
            </li>
            <li>
                <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">
            </li>
            <li>
                <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">
            </li>
        </ul>
    </div>
    <div class="gray-panel">
        <div class="paoduct-title-panel">
            <h1 class="product-h1">家鸡</h1>
            <p><span class="bold">价格：</span><span class="red2" >￥0.00</span>&nbsp;&nbsp;<span class="product-title-gray-text" style="text-decoration:line-through;">￥500.00</span></p>
        </div>
        <%--<div class="my-search-title-panel">--%>
            <%--<ul class="am-avg-sm-4 am-text-center am-text-sm">--%>
                <%--<li class="am-text-center">销量<br />0件</li>--%>
                <%--<li class="am-text-center">库存<br />0件</li>--%>
                <%--<li class="am-text-center">订单<br />0个</li>--%>
                <%--<li class="am-text-center">评价<br />0条</li>--%>
            <%--</ul>--%>
        <%--</div>--%>
        <div class="my-search-title-panel">
            <p class="my-search-titp-p am-text-sm bold">地址</p>
            <div class="am-btn-group doc-js-btn-1" data-am-button>
                <c:if test="${addresses.size()==0}">
                    请先添加地址
                </c:if>
                <c:if test="${addresses.size()>0}">
                    <c:forEach items="${addresses}" varStatus="status" var="li">
                        <c:if test="${status.first}">
                            <label class="am-btn am-btn-default am-u-sm-12 ">
                            <input type="radio" name="options" value="${li.id}" id="option1"> ${li.street}
                        </label>
                        </c:if>
                        <c:if test="${!status.first}">
                            <label class="am-btn am-btn-default am-u-sm-12 " style="margin: 0px;margin-top: 1px">
                                <input type="radio" name="options" value="${li.id}" id="option${status.count}"> ${li.street}
                            </label>
                        </c:if>
                    </c:forEach>
                </c:if>
                <%--<label class="am-btn am-btn-default am-u-sm-12 ">--%>
                    <%--<input type="radio" name="options" value="选项啊实打实的" id="option1"> 选项啊实打实的为23213烦烦烦--%>
                <%--</label>--%>
                <%--<label class="am-btn am-btn-default  am-u-sm-12" style="margin: 0px;margin-top: 1px">--%>
                    <%--<input type="radio" name="options" value="选项 啊实打实的" id="option2"> 选项啊实打实的--%>
                <%--</label>--%>
                <%--<label class="am-btn am-btn-default am-u-sm-12" style="margin: 0px;margin-top: 1px">--%>
                    <%--<input type="radio" name="options" value="选项 二人日日日日日" id="option3"> 选项啊实打实的--%>
                <%--</label>--%>
                <%--<label class="am-btn am-btn-default  am-disabled">--%>
                    <%--<input type="radio" name="options" value="选项回家看看" id="option4"> 选项啊实打实的--%>
                <%--</label>--%>
            </div>
            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
            <p class="my-search-titp-p am-text-sm bold">数量</p>
            <div style="overflow:hidden">
                <form class="am-form-inline" role="form">
                    <button type="button" class="am-btn am-btn-default" style="float:left" onClick="subtractQty();" ><i class="am-icon-minus"></i></button>
                    <input type="number" name="txtQty" id="txtQty" class="am-form-field txt-qty am-text-center am-text-sm" value="1" style=" width:60px; margin-right:0px; height:37px; display:inline; float:left">
                    <button type="button" class="am-btn am-btn-default" style="float:left" onClick="addQty();" ><i class="am-icon-plus"></i></button>
                </form>
            </div>
            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
            <div>
                    <button type="button" id="change-now" class="am-btn am-btn-success am-btn-block am-radius">立即兑换</button>
                    <%--<li class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-danger am-btn-block am-radius">立即兑换</button></li>--%>
                </ul>
            </div>
        </div>
    </div>




    <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
        <hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
        <div class="am-footer-miscs ">
            <p>CopyRight©2018 明月故乡</p>
            <%--<p>京ICP备13033158</p>--%>
        </div>
    </footer>

        <script>
            var mature = parseInt('${chick.mature}');
            function checkIsInteger(str)
            {
                //如果为空，则通过校验
                if(str == "")
                    return true;
                if(/^(\-?)(\d+)$/.test(str))
                    return true;
                else
                    return false;
            }
            var errordialog=function(c,title){
                $("#warn-mes").text(c);
                if(title){
                   $("#warn-title").text(title);
                }else{
                    $("#warn-title").text("数量限制");
                }
                $("#my-alert").modal("open");
                // alert(c)
            }
            //检验商品数量
            function checkCounts(id) {
                var Counts = $("#" + id).val();
                if (Counts == "") {
                    errordialog("请填写数量!");
                    return false;
                }
                else if (!checkIsInteger(Counts)) {
                    errordialog("商品数量不是整数!");
                    return false;
                }
                else if (Counts < 1) {
                    errordialog("商品数量不能小于1!");
                    return false;
                }
                else if (Counts > mature) {
                    errordialog("商品数量不能超过"+mature+"!");
                    return false;
                }
                else {
                    return true;
                }
            }
            function addQty(){
                checkCounts('txtQty');
                var qty = parseInt($('#txtQty').val());
                if ((qty+1) > mature) {
                    errordialog("商品数量不能超过可兑换数!");
                    return false;
                }
                $('#txtQty').val(qty+1);
            }
            function subtractQty(){
                checkCounts('txtQty');
                var qty = parseInt($('#txtQty').val());
                if(qty <=1){
                    errordialog("商品数量不能小于1!");
                    return;
                }
                $('#txtQty').val(qty-1);
            }

            $("#change-now").click(function () {
                var $radios = $('[name="options"]');
                var addressId = $radios.filter(':checked').val();
                if(addressId==null){
                    errordialog("请先添加或选择地址，再兑换","缺少地址");
                    return false;
                }
                var counts = parseInt($('#txtQty').val());
                if(!isIntNum(counts)){
                    errordialog("请输入正确的商品数量!");
                    return false;
                }
                if(mature<counts){
                    errordialog("商品数量不能超过可兑换数!");
                    return false;
                }
                $("#change-now").attr("disabled","disabled");
                $("#change-now").text("兑换中...");
                setTimeout(function () {
                    $("#change-now").removeAttr("disabled");
                    $("#change-now").text("立即兑换");
                },4000);

                $.post("/chick/order",{
                    userId:parseInt('${chick.userId}'),
                    count:counts,
                    addressId:addressId
                },function () {
                    errordialog("恭喜您，兑换成功！","兑换成功");
                    $('#my-alert').on('closed.modal.amui', function() {
                        window.location.href="/chick/index?uid=${chick.userId}";
                    });

                });
            });
            function isIntNum(val){
                var regPos = / ^\d+$/; // 非负整数
                // var regNeg = /^\-[1-9][0-9]*$/; // 负整数
                if(regPos.test(val)){
                    return true;
                }else{
                    return false;
                }
            }
            // 获取选中的值

                // $radios.on('change',function() {
                //     console.log('单选框当前选中的是：', $radios.filter(':checked').val());
                // });
        </script>
        <script>
            function showFooterNav(){
                $("#footNav").toggle();
            }
        </script>

</div>
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd" id="warn-title">数量限制</div>
        <div class="am-modal-bd" id="warn-mes">
            Hello world！
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>
</body>
</html>
